<template>
  <div>
  <div style="margin-bottom: 10px; margin-top: 10px;margin-right: 35px;
text-align: right"  >
    <el-input  v-model="searchName" class="w-50 m-2"  :suffix-icon="Search" placeholder="请输入名字" style="width: 230px" ></el-input>
    <el-button  id="31" type="primary" plain style="margin-left: 10px"
    @click="search">查找</el-button>
    <el-button id="32" type="primary" plain style="margin-left: 10px" @click="Add()">增加</el-button>
  </div>
  <el-scrollbar>
    <el-table :data="tableData">
      <el-table-column
          label="序号"
          type="index"
          width="80"
          align="center">
        <template v-slot="scope">
          <span>{{(currentPage - 1) * pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="userName" label="用户名"  />
      <el-table-column prop="password" label="密码">
      </el-table-column>
      <el-table-column prop="phone" label="电话号"/>

      <el-table-column prop="" label="操作" >

        <template v-slot="scope">
        <el-button type="success" @click="Edit(scope.row)" >编辑</el-button>

            <el-button type="danger" @click="Delete(scope.row.userName)">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-dialog style="width: 300px" v-model="dialogFormVisible" title="新增用户信息" @close="clear('form')">
      <el-form style="width: 250px" :model="form"  :label-position="labelPosition" ref="form" :rules="rules">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="name">
          <el-input  v-model="form.name" autocomplete="off" />
        </el-form-item>
        <el-form-item label="用户密码" :label-width="formLabelWidth" prop="password">
          <el-input v-model="form.password" autocomplete="off" />
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth" prop="phone">
          <el-input v-model="form.phone" autocomplete="off" />
        </el-form-item>

      </el-form>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="clear('form')">取消</el-button>
        <el-button type="primary" @click="save()">
          确定
        </el-button>
      </span>
      </template>
    </el-dialog>

  </el-scrollbar>
  <div class='block'>
    <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
    >
    </el-pagination>
  </div>
  </div>
</template>

<script>
import request from "@/util/request";
import {ElMessage} from "element-plus";


export default {
  name: "AdminIndex-Main",
  data(){
    return{


      pageSize:10,
      currentPage:1,
      total:13,


      tempUid:'',
      tableData:[],
      searchName:'',
      dialogFormVisible:false,
      formLabelWidth: '150px',
      labelPosition:'top',

      form: {
        name:'',
        password:'',
        phone:'',
      },

      rules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        phone: [
          { required: true, message: '手机号不能为空', trigger: 'blur' },
          { pattern: /^((0\d{2,3}-\d{7,8})|(1[3456789]\d{9}))$/, message: '请输入正确的手机号码', trigger: 'blur' }
        ],
      }
    }
  },
  methods:{

    handleCurrentChange(val){
      console.log(`${val} items per page`)
      this.currentPage=val
      this.loadGet()
    },


    Add(){
     this.dialogFormVisible=true;
     document.getElementById("32").blur();
    },

    clear(formname){
      this.$refs[formname].resetFields();

    },

    save(){
      this.$refs.form.validate(valid=>{
        if(valid) {

          if(this.tempUid==''){
            if(this.form.name!=''&&this.form.password!=''&&this.form.phone!=''){
              this.doSave()
            }else{
              ElMessage({
                message: '信息不能为空！',
                type: 'warning',
              })

            }
          }else{
            this.doEdit()
          }
          this.clear('form')

        }
      })

    },

    doSave(){
      this.dialogFormVisible=false
      // let config = {
      //    headers:{
      //      "Content-Type":"multipart/form-data"
      //    }
      // };
      //  let formData = new FormData();
      //  formData.append("userName",userName);
      request.post('http://localhost:8090/user/addUser',{
        userName:this.form.name,
        tenantName:this.$cookies.get("value").tenantName,
        password:this.form.password,
        phone:this.form.phone,
      }).then(res=>res.data).then(res=>{
        if(res.code=="200"){
          ElMessage({
            message: '添加新用户成功',
            type: 'success',
          })
        }else{
          ElMessage({
            message: res.message,
            type: 'warning',
          })
        }
        this.loadGet()
      });
    },

    doEdit(){
      this.dialogFormVisible=false
      request.post('http://localhost:8090/user/updateUser',{
        userName:this.form.name,
        password:this.form.password,
        phone:this.form.phone,
        uid:this.tempUid
      }).then(res=>res.data).then(res=>{
        if(res.code=="200"){
          console.log(res.data)
          ElMessage({
            message: '编辑已保存',
            type: 'success',
          })
        }else{
          ElMessage({
            message: res.message,
            type: 'warning',
          })
          console.log(res)
        }
		this.tempUid=''
        this.loadGet()
      });
    },

    loadGet(){
      console.log("+++++++++"+this.$cookies.get('value').tid)
     request.post('http://localhost:8090/user/showUser',{
         tid:this.$cookies.get('value').tid,
     }).then(res=>res.data).then(res=>{
       this.tableData=res.data[this.currentPage-1].records
       this.total=res.data[this.currentPage-1].total
       console.log(res)
      });
    },
    search(){
      document.getElementById("31").blur();
      this.loadPost()
    },
    loadPost(){
      request.post('http://localhost:8090/user/findUserByUserName',{
        userName:this.searchName,
        tid:this.$cookies.get('value').tid,
      }).then(res=>res.data).then(res=>{
       if(res.code=="200"){
         console.log(res.data)
         this.tableData=res.data[this.currentPage-1].records;
       }else{
        alert("查询失败")
         console.log(res)
            }
      });
    },

     Delete(userName){
       console.log(userName)
      // let config = {
      //    headers:{
      //      "Content-Type":"multipart/form-data"
      //    }
      // };
      //  let formData = new FormData();
      //  formData.append("userName",userName);
       request.post('http://localhost:8090/user/deleteUser', {
         userName:userName
       }).then(res=>res.data).then(res=>{
         if(res.code=="200"){
           ElMessage({
             message: "删除成功",
             type: 'success',
           })
         }else{
           ElMessage({
             message: res.message,
             type: 'warning',
           })
         }
         this.loadGet()
       });
    },

     Edit(row){
      this.form.phone=row.phone
      this.form.name=row.userName;
      this.form.password=row.password
      this.dialogFormVisible=true
      this.tempUid=row.uid
    }

  },
  beforeMount() {
    this.loadGet()
  }
}
</script>

<style scoped>

</style>
